<template>
	<view>
		<jiazai v-if="isshow"></jiazai>
		<view v-else>
			<view class="songer u-f-ac animated fadeIn slow" v-for="(item,index) in list" @tap="hanleto"
			:data-id="item.id" :key="index">
				<view  class="pic">
					<!--如果接受数据里没有图片资源就替换一张-->
					<image v-if="item.pic!='null?param=100y100'" lazy-load :class="{pic_user:user}" mode="widthFix" style="width:100%;" :src="item.pic"></image>
					<image v-else src="../../../static/icon/home_4.png" mode="widthFix" style="width: 100%;"></image>
					
					<image v-if="album" class="albumpic" mode="widthFix" 
					 src="../../../static/icon/a6l.png"></image>
				</view>
				<view class="info" :class="{info_songer:songer}" >
					<view class="name u-f-ac">
						<text>{{item.name}}</text>
						<view v-if="user">
							<image mode="widthFix" style="width: 30upx; margin-left: 10upx;"
							:src="item.gender==1?'../../../static/icon/gender2.png':'../../../static/icon/gender1.png'" >
							</image> 	
						</view>
					</view>
					<view class="item_info u-f-ac" >
						<text style="margin-right: 10upx;" v-if="item.trackCount">{{item.trackCount}}首,</text>
						<text v-if="item.author">By{{item.author}}</text>
						<text style="margin-left: 10upx;" v-if="item.playCount">播放{{item.playCount}}次</text>
						<text class="eps-1" style="margin-left: 10upx;" v-if="item.signature">{{item.signature}}</text>
					</view>	
				</view>
			</view>
			<load-more v-if="jiazai"></load-more>
		</view>
	</view>
</template>

<script>
	import jiazai from '../../home/jiazai/jiazai.vue'
	import loadMore from '../../index/load-more/load-more.vue'
	export default {
		components:{
			jiazai,
			loadMore
		},
		props:{
			list:Array,
			songer:Boolean,
			album:Boolean,
			user:Boolean,
			jiazai:Boolean
		},
		data() {
			return {
				isshow:true,
				styler:'stylerr'	
			}
		},
		created() {
			setTimeout(v=>{
				this.isshow=false
			},1500)
		},
		methods: {
			hanleto(e){
				let {id}=e.currentTarget.dataset;
				if(this.songer){
					uni.navigateTo({
						url:'../songer/songer?id='+id
					})
				}
				else if(this.album){
					uni.navigateTo({
						url:'../playlist/playlist?aid='+id
					})
				}
				else if(this.user){
 					uni.navigateTo({
						url:'../user/user?uid='+id
					})
				}
				else{
 					uni.navigateTo({
						url:'../playlist/playlist?id='+id
					})
				}
				
			}
			
		}
	}
</script>

<style lang="less" scoped>
	.songer{
		padding: 10upx;
		.pic{
			width: 100upx;
			position:relative;
			.albumpic{
				width: 100%;
				position: absolute;
				top:0;
				left: 15upx;
			}
		}
		.pic_user{
			border-radius: 50%;	
		}
		.info{
			width: 650upx;
			border-bottom: 1upx solid #CCCCCC;
			margin-left: 20upx;
			.name{
			}
			.item_info{
				font-size: 26upx;
				color: #CCCCCC;
			}
		}
		.info_songer{
			padding-bottom: 30upx;
		}
	}
</style>
